<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
    />
    <title>大众点评</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element.css" />

    <link href="./css/shop-detail.css" rel="stylesheet" />
    <link href="./css/main.css" rel="stylesheet" />

    <style type="text/css"></style>
  </head>
  <body>
    <div id="app">
      <div class="header">
        <div class="header-back-btn" @click="goBack">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="header-title"></div>
        <div class="header-share">...</div>
      </div>
      <div class="top-bar"></div>
      <div class="shop-info-box">
        <div class="shop-title">{{shop.name}}</div>
        <div class="shop-rate">
          <el-rate
            disabled
            v-model="shop.score/10"
            text-color="#F63"
            show-score
          ></el-rate>
          <span>{{shop.comments}}条</span>
        </div>
        <div class="shop-rate-info">口味:4.9 环境:4.8 服务:4.7</div>
        <div class="shop-rank">
          <img src="/imgs/bd.png" width="63" height="20" alt="" />
          <span>普陀区好评榜第3名</span>
          <div><i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="shop-images">
          <div v-for="(s,i) in shop.images" :key="i">
            <img :src="s" alt="" />
          </div>
        </div>
        <div class="shop-address">
          <div><i class="el-icon-map-location"></i></div>
          <span>{{shop.address}}</span>
          <div
            style="
              width: 10px;
              flex-grow: 2;
              text-align: center;
              color: #e1e2e3;
            "
          >
            |
          </div>
          <div style="margin: 0 5px">
            <img
              src="https://p0.meituan.net/travelcube/bf684aa196c870810655e45b1e52ce843484.png@24w_16h_40q"
              alt=""
            />
          </div>
          <div>
            <img
              src="https://p0.meituan.net/travelcube/9277ace32123e0c9f59dedf4407892221566.png@24w_24h_40q"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="shop-divider"></div>
      <div class="shop-open-time">
        <span><i class="el-icon-watch"></i></span>
        <div>营业时间</div>
        <div>{{shop.openHours}}</div>
        <!--    <span class="line-right">查看详情 <i class="el-icon-arrow-right"></i></span>-->
      </div>
      <div class="shop-divider"></div>
      <div class="shop-voucher">
        <div>
          <span class="voucher-icon">券</span>
          <span style="font-weight: bold">优惠券</span>
        </div>
        <div
          class="voucher-box"
          v-for="v in vouchers"
          :key="v.id"
          v-if="!isEnd(v)"
        >
          <div class="voucher-circle">
            <div class="voucher-b"></div>
            <div class="voucher-b"></div>
            <div class="voucher-b"></div>
          </div>
          <div class="voucher-left">
            <div class="voucher-title">{{v.title}}</div>
            <div class="voucher-subtitle">{{v.subTitle}}</div>
            <div class="voucher-price">
              <div>￥ {{util.formatPrice(v.payValue)}}</div>
              <span>{{v.actualValue}}折</span>
            </div>
          </div>
          <div class="voucher-right">
            <div v-if="v.type" class="seckill-box">
              <div
                class="voucher-btn"
                :class="{'disable-btn': isNotBegin(v) || v.stock < 1}"
                @click="seckill(v)"
              >
                限时抢购
              </div>
              <div class="seckill-stock">剩余 <span>{{v.stock}}</span> 张</div>
              <div class="seckill-time">{{formatTime(v)}}</div>
            </div>
            <div class="voucher-btn" v-else>抢购</div>
          </div>
        </div>
      </div>
      <div class="shop-divider"></div>
      <div class="copyright">copyright ©2021 hmdp.com</div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="./js/element.js"></script>
    <script src="./js/common.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          util,
          shop: {},
          vouchers: [],
          item: null,
          comments: [],
        },
        created() {
          // 获取参数
          // this.shop = util.getUrlParam("item");
          // 查询酒店信息
          // this.queryShopById(this.shop.id);
          // 查询优惠券信息
          // this.queryVAoucher(this.shop.id);
          let shopId = util.getUrlParam("id");
          // 查询酒店信息
          this.queryShopById(shopId);
          // 查询优惠券信息
          this.queryVoucher(shopId);
        },
        methods: {
          loadComment() {
            this.request.get("/comment/tree/" + this.id).then((res) => {
              this.comments = res.data;
            });
          },
          changeMap(x, y) {
            console.log("点击成功：" + x + "," + y);
            location.href = "map.html?x=" + x + "&y=" + y;
          },
          goBack() {
            history.back();
          },
          queryShopById(shopId) {
            // axios
            //   .get("/shop/" + shopId)
            //   .then(({ data }) => {
            //     data.images = data.images.split(",");
            //     this.shop = data;
            //   })
            //   .catch(this.$message.error);
            this.shop = {
              images: [
                "/imgs/detail/shopping1.jpg",
                "/imgs/detail/shopping2.jpg",
              ],
              name: "湘粤美食饭店",
              openHours: "09:00 - 24:00",
              score: 48,
              comments: 45,
              address: "朱家尖街道莲花北路72号",
            };
          },
          queryVoucher(shopId) {
            // axios
            //   .get("/voucher/list/" + shopId)
            //   .then(({ data }) => {
            //     this.vouchers = data;
            //   })
            //   .catch(this.$message.error);
            this.vouchers = [
              {
                title: "新客优惠券",
                subTitle: "首次光顾用户享受8.5折",
                payValue: 0,
                actualValue: 8.5,
              },
              {
                title: "豪华双人餐折扣券",
                subTitle: "豪华双人餐折扣券享受9.0折",
                payValue: 1000,
                actualValue: 9,
              },
            ];
          },
          formatTime(v) {
            let b = new Date(v.beginTime);
            let e = new Date(v.endTime);
            return (
              b.getMonth() +
              1 +
              "月" +
              b.getDate() +
              "日 " +
              b.getHours() +
              ":" +
              this.formatMinutes(b.getMinutes()) +
              " ~ " /*  + e.getMonth() + 1 + "月" + e.getDate() + "日 " */ +
              e.getHours() +
              ":" +
              this.formatMinutes(e.getMinutes())
            );
          },
          formatMinutes(m) {
            if (m < 10) m = "0" + m;
            return m;
          },
          isNotBegin(v) {
            return new Date(v.beginTime).getTime() > new Date().getTime();
          },
          isEnd(v) {
            return new Date(v.endTime).getTime() < new Date().getTime();
          },
          seckill(v) {
            if (!token) {
              this.$message.error("请先登录");
              // 未登录，跳转
              setTimeout(() => {
                location.href = "/login.html";
              }, 200);
              return;
            }
            if (this.isNotBegin(v)) {
              this.$message.error("优惠券抢购尚未开始！");
              return;
            }
            if (this.isEnd(v)) {
              this.$message.error("优惠券抢购已经结束！");
              return;
            }
            if (v.stock < 1) {
              this.$message.error("库存不足，请刷新再试试！");
              return;
            }
            let id = v.id;
            // 秒杀抢购
            axios
              .post("/voucher-order/seckill/" + id)
              .then(({ data }) => {
                // 抢购成功，这里输出订单id，支付功能TODO
                this.$message.success("抢购成功，订单id：" + data);
              })
              .catch(this.$message.error);
          },
        },
      });
    </script>
  </body>
</html>
